<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="推送历史"
        left-arrow
        @click-left="
          () => {
            $router.push('/home/me/index');
          }
        "
      />
    </van-sticky>

    <div id="main">
      <div class="view" ref="parentDiv">
        <!-- 因是假数据，所以ID暂时用随机数 这里可能会有eslint的报错，可以忽略-->
        <div class="single" v-for="(item, index) in list" :key="Math.random()">
          <div class="cover">
            <img :src="item.cover" alt="pic" @load="Trigger" />
          </div>
          <p>{{ `${item.title} - ${index}` }}</p>

          <div class="single-footer">
            <div class="left">
              <div class="head_icon">
                <img :src="item.headIcon" alt="headicon" />
              </div>

              <span>{{ item.userName }}</span>
            </div>
            <span>{{ $numUnit(item.favor) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** 监听视窗的尺寸变化，瀑布流将会响应式的更新 重新计算位置 */
// 创建一个全局混入对象
const windowResizeMixin = {
  mounted() {
    // 在组件挂载后，添加窗口大小变化的监听事件
    window.addEventListener("resize", this.onWindowResize);
  },
  // destroyed() {
  //   // 在组件销毁前，移除窗口大小变化的监听事件
  //   window.removeEventListener('resize', this.onWindowResize);
  // },
  methods: {
    // 窗口大小变化的回调方法
    onWindowResize() {
      // 在这里调用组件中的方法，例如：
      this.myMethod();
    },
  },
};

export default {
  mixins: [windowResizeMixin],
  data() {
    return {
      isDragging: false,
      startPosX: 0,
      scrollLeft: 0,

      // 顶部类型传送门数据列表
      nav_list: [
        {
          id: 0,
          title: "衣柜",
          desc: "4类常见类型",
          pic: "https://i0.hdslb.com/bfs/article/6a217cbf5c8e26aa51e6f8cb878cb2836563cd66.jpg",
        },
        {
          id: 1,
          title: "橱柜",
          desc: "7类常见台面",
          pic: "https://i0.hdslb.com/bfs/article/73dfa32b2a99d8f5a15af0292611cd52a78582ec.jpg",
        },
        {
          id: 2,
          title: "书柜",
          desc: "4大定制技巧",
          pic: "https://img2.baidu.com/it/u=800154719,3530206019&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300",
        },
        {
          id: 3,
          title: "鞋柜",
          desc: "4类常见类型",
          pic: "https://img1.baidu.com/it/u=4282737922,4215908400&fm=253&fmt=auto&app=138&f=JPEG?w=484&h=406",
        },
        {
          id: 4,
          title: "电视柜",
          desc: "4类常见类型",
          pic: "https://img1.baidu.com/it/u=2226996792,864040440&fm=253&fmt=auto&app=120&f=JPEG?w=347&h=375",
        },
      ],

      // 为你推荐数据列表
      list: [
        {
          id: null,
          cover:
            "https://lmg.jj20.com/up/allimg/4k/s/01/210924153TQ029-0-lp.jpg",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F01%2F20180701020119_fCyrj.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692853009&t=88d7ce68efa0834de667e20e529162ae",
          title: "这是一个测试对象",
          userName: "SakuraAyi",
          favor: 2333,
        },
        {
          id: null,
          cover:
            "https://i0.hdslb.com/bfs/album/60ed62f9cf08da3016075337f3514c8910b1e9e2.jpg",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F20%2F20210820130957_b9e4c.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692852991&t=42c6e2442871f7f01a0f8835d008d132",
          title: "这是一个测试对象",
          userName: "A1ice",
          favor: 32000,
        },
        {
          id: null,
          cover:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F03%2F20200303164005_clmyd.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692852946&t=6850f17333d8c734062666ed4b8ad4a2",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F21%2F20190721015100_snsaq.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692853051&t=1afe4679f0d402ffc200d1a43ca2f4a8",
          title: "这是一个测试对象",
          userName: "Flandre",
          favor: 60000,
        },
        {
          id: null,
          cover:
            "https://img1.baidu.com/it/u=3920219100,77026924&fm=253&fmt=auto&app=138&f=JPEG?w=862&h=500",
          headIcon:
            "https://img0.baidu.com/it/u=2956976224,3230250019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=538",
          title: "这是一个测试对象",
          userName: "Remilia",
          favor: 16000,
        },
        {
          id: null,
          cover:
            "https://i0.hdslb.com/bfs/archive/6fa127d61c4f106a976f720693589c2fb8e62a39.jpg",
          headIcon:
            "https://img1.baidu.com/it/u=4032810567,4190851424&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          title: "这是一个测试对象5",
          userName: "uuz",
          favor: 1500,
        },
        {
          id: null,
          cover:
            "https://img0.baidu.com/it/u=2662416525,1397946802&fm=253&fmt=auto&app=138&f=JPEG?w=419&h=500",
          headIcon:
            "https://img2.baidu.com/it/u=79000775,2947477864&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400",
          title: "这是一个测试对象",
          userName: "Skay",
          favor: 500,
        },
        {
          id: null,
          cover:
            "https://lmg.jj20.com/up/allimg/4k/s/01/210924153TQ029-0-lp.jpg",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F01%2F20180701020119_fCyrj.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692853009&t=88d7ce68efa0834de667e20e529162ae",
          title: "这是一个测试对象",
          userName: "SakuraAyi",
          favor: 520,
        },
        {
          id: null,
          cover:
            "https://i0.hdslb.com/bfs/album/60ed62f9cf08da3016075337f3514c8910b1e9e2.jpg",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F20%2F20210820130957_b9e4c.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692852991&t=42c6e2442871f7f01a0f8835d008d132",
          title: "这是一个测试对象",
          userName: "A1ice",
          favor: 1000,
        },
        {
          id: null,
          cover:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F03%2F20200303164005_clmyd.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692852946&t=6850f17333d8c734062666ed4b8ad4a2",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F21%2F20190721015100_snsaq.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692853051&t=1afe4679f0d402ffc200d1a43ca2f4a8",
          title: "这是一个测试对象",
          userName: "Flandre",
          favor: "6.6w",
        },
        {
          id: null,
          cover:
            "https://img1.baidu.com/it/u=3920219100,77026924&fm=253&fmt=auto&app=138&f=JPEG?w=862&h=500",
          headIcon:
            "https://img0.baidu.com/it/u=2956976224,3230250019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=538",
          title: "这是一个测试对象",
          userName: "Remilia",
          favor: 53453,
        },
        {
          id: null,
          cover:
            "https://i0.hdslb.com/bfs/archive/6fa127d61c4f106a976f720693589c2fb8e62a39.jpg",
          headIcon:
            "https://img1.baidu.com/it/u=4032810567,4190851424&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          title: "这是一个测试对象5",
          userName: "uuz",
          favor: 1232,
        },
        {
          id: null,
          cover:
            "https://img0.baidu.com/it/u=2662416525,1397946802&fm=253&fmt=auto&app=138&f=JPEG?w=419&h=500",
          headIcon:
            "https://img2.baidu.com/it/u=79000775,2947477864&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400",
          title: "这是一个测试对象",
          userName: "Skay",
          favor: 23453,
        },
        {
          id: null,
          cover:
            "https://lmg.jj20.com/up/allimg/4k/s/01/210924153TQ029-0-lp.jpg",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F01%2F20180701020119_fCyrj.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692853009&t=88d7ce68efa0834de667e20e529162ae",
          title: "这是一个测试对象",
          userName: "SakuraAyi",
          favor: 53453,
        },
        {
          id: null,
          cover:
            "https://i0.hdslb.com/bfs/album/60ed62f9cf08da3016075337f3514c8910b1e9e2.jpg",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F20%2F20210820130957_b9e4c.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692852991&t=42c6e2442871f7f01a0f8835d008d132",
          title: "这是一个测试对象",
          userName: "A1ice",
          favor: 2245,
        },
        {
          id: null,
          cover:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F03%2F20200303164005_clmyd.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692852946&t=6850f17333d8c734062666ed4b8ad4a2",
          headIcon:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F21%2F20190721015100_snsaq.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692853051&t=1afe4679f0d402ffc200d1a43ca2f4a8",
          title: "这是一个测试对象",
          userName: "Flandre",
          favor: 3257,
        },
        {
          id: null,
          cover:
            "https://img1.baidu.com/it/u=3920219100,77026924&fm=253&fmt=auto&app=138&f=JPEG?w=862&h=500",
          headIcon:
            "https://img0.baidu.com/it/u=2956976224,3230250019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=538",
          title: "这是一个测试对象",
          userName: "Remilia",
          favor: 5483,
        },
        {
          id: null,
          cover:
            "https://i0.hdslb.com/bfs/archive/6fa127d61c4f106a976f720693589c2fb8e62a39.jpg",
          headIcon:
            "https://img1.baidu.com/it/u=4032810567,4190851424&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          title: "这是一个测试对象5",
          userName: "uuz",
          favor: 6543,
        },
        {
          id: null,
          cover:
            "https://img0.baidu.com/it/u=2662416525,1397946802&fm=253&fmt=auto&app=138&f=JPEG?w=419&h=500",
          headIcon:
            "https://img2.baidu.com/it/u=79000775,2947477864&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400",
          title: "这是一个测试对象",
          userName: "Skay",
          favor: 4582,
        },
      ],
    };
  },
  methods: {
    bottom(el) {
      // 读取元素的top值 也就是距离顶部
      // const rect = el.getBoundingClientRect();
      // const topValue = rect.top;
      const top = el.offsetTop;
      const h = el.offsetHeight;
      return h + top;
    },
    // 触发瀑布流布局
    Trigger() {
      // 这里是对于瀑布流布局的设置
      const parentDiv = this.$refs.parentDiv;
      const childDivs = parentDiv.querySelectorAll(".single");
      const els = [];
      childDivs.forEach((el, index) => {
        let dist = index * (el.offsetWidth + 10);
        if (index < 2) {
          el.style.top = 0;
          el.style.left = `${dist}px`;
          els.push(el);
        } else {
          // 序号=>2开始 属于第二排 以及其他

          // 查找最小的开始
          let el_min = els[0];
          els.forEach((el) => {
            // console.log('底部：', this.bottom(el));
            if (this.bottom(el) < this.bottom(el_min)) {
              el_min = el; //使用更小的覆盖之前的捏
            }
          });
          // 新元素拜访在最小元素下方 正下方
          el.style.left = el_min.style.left;
          el.style.top = this.bottom(el_min) + 10 + "px";

          // 把被下方补上的元素替换掉
          const i = els.indexOf(el_min);
          els.splice(i, 1, el);
        }
      });

      // 解决高度坍塌
      let el_max = els[0];
      els.forEach((el) => {
        if (this.bottom(el) > this.bottom(el_max)) {
          el_max = el;
        }
      });
      this.$refs.parentDiv.style.height =
        el_max.offsetTop + el_max.offsetHeight + 30 + "px";
    },
    myMethod() {
      console.log("检测到窗口发生变动，重新计算瀑布流布局");
      this.Trigger();
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 这是测试中显示的文本样式
.test_title {
  margin-bottom: 32px;
}

#app {
  // width: 480px;
  height: auto;
  margin: 0 auto;
  text-align: center;
  // padding: 10px 20px;
  // border: 1px solid #333;

  #main {
    padding: 20px 20px 0 20px;

    > h3 {
      text-align: left;
      margin-bottom: 15px;
      user-select: none;
    }

    > .view {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      // border: 1px solid red;

      > .single {
        display: flex;
        flex-direction: column;
        align-items: start;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
        width: calc((100% - 10px) / 2);
        margin: 0 10px 20px 0;
        height: max-content;
        overflow: hidden;
        border-radius: 12px;

        // 瀑布流布局：必须用绝对定位才能随意调整位置！ 相对与View
        position: absolute;

        &:nth-child(2n) {
          margin-right: 0;
        }

        > .cover {
          width: 100%;
          height: auto;
          max-height: 250px;
          overflow: hidden;

          > img {
            width: 100%;
            height: auto;
            display: inline-block;
          }
        }

        > p {
          font: normal 600 14px sans-serif;
          white-space: normal;
          padding: 10px 6px 0;
          color: #333;
        }

        > .single-footer {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px 8px;

          > .left {
            display: flex;
            align-items: center;

            > .head_icon {
              width: 24px;
              height: 24px;
              overflow: hidden;
              border-radius: 100px;
              margin-right: 5px;

              > img {
                width: 100%;
                height: auto;
              }
            }

            > span {
              font: normal 400 12px sans-serif;
              color: #666;
              width: 60%;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          > span {
            font: normal 200 12px sans-serif;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
